<template>
  <div id="detailshopinfo">
    <div class="header-shop">
      <div class="shop-logo"><img :src="shop.shopLogo" alt="" /></div>
      <div class="shop-name">{{ shop.name }}</div>
    </div>
    <div class="shop-middle">
      <div class="shop-middle-left">
        <div class="shop-sells">
          <span class="count">{{ sellCount }}</span>
          <div class="sell">总销量</div>
        </div>
        <div class="shop-sells">
          <span class="count">{{ shop.cFans }}</span>
          <div class="sell">全部宝贝</div>
        </div>
      </div>
      <div class="shop-middle-right">
        <div class="shopbetter">
          <span>{{ shop.score[0].name }}</span
          ><span>{{ shop.score[0].score }}</span
          ><span>{{ Judge }}</span>
        </div>
        <div class="shopbetter">
          <span>{{ shop.score[1].name }}</span
          ><span>{{ shop.score[1].score }}</span
          ><span>{{ Judge1 }}</span>
        </div>
        <div class="shopbetter">
          <span>{{ shop.score[2].name }}</span
          ><span>{{ shop.score[2].score }}</span
          ><span>{{ Judge2 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailShopInfo",
  props: {
    shop: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    sellCount() {
      const sell = this.shop.cSells;
      if (sell < 10000) {
        return sell;
      } else {
        return parseInt(sell / 10000) + "万";
      }
    },
    Judge() {
      const judge = this.shop.score[0].isBetter;
      if (judge == false) {
        return "低";
      } else {
        return "高";
      }
    },
    Judge1() {
      const judge = this.shop.score[1].isBetter;
      if (judge == false) {
        return "低";
      } else {
        return "高";
      }
    },
    Judge2() {
      const judge = this.shop.score[2].isBetter;
      if (judge == false) {
        return "低";
      } else {
        return "高";
      }
    },
  },
};
</script>

<style scoped>
#detailshopinfo {
  margin-bottom: 300px;
  text-align: left;
}
.header-shop {
  display: flex;
  margin-bottom: 30px;
}
.shop-logo {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 10px;
  border: 1px solid #ccc;
}
.shop-logo img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.shop-name {
  line-height: 50px;
}
.shop-middle-left {
  border-right: 1px solid #ccc;
}
.shop-middle-left .count {
  font-size: 18px;
}
.shop-middle-left .sell {
  font-size: 14px;
}
.shop-sells {
  float: left;
  margin: 0 20px;
}
.shop-middle {
  display: flex;
}
.shop-middle-right {
  font-size: 14px;
  margin-right: 20px;
}
</style>